// import './App.css';
// import React, {useState } from 'react';
// import { Button, Carousel, Calendar, Badge, Cascader, Checkbox, Row, Col, Rate } from 'antd';
// const contentStyle = {
//   width: '320px',
//   height: '160px',
//   color: '#fff',
//   lineHeight: '160px',
//   textAlign: 'center',
//   background: '#364d79',
// };
// const backgroundStyle = {
//   width: '320px',
//   height: '160px',
// };
// const calenderStyle = {
//   width: '640px',
//   height: '320px',
// };
// const marginTopStyle = {
//   marginTop: '20px',
//   width:'100%',
// }
// function onPanelChange(value, mode) {
//   console.log(value.format('YYYY-MM-DD'),mode);
// };
// function getListData(value){
//   let listData;
//   switch(value.date()){
//     case 9:
//       listData = [
//         {type: 'warning', content: 'This is warning event.'},
//         {type: 'success', content: 'This is success event.'},
//       ];
//       break;
//     case 15:
//       listData = [
//         {type: 'warning', content: 'This is warning event.'},
//         {type: 'success', content: 'This is success event.'},
//         {type: 'error', content: 'This is error event.'},
//       ];
//       break;
//     case 25:
//       listData = [
//         {type: 'warning', content: 'This is warning event.'},
//         {type: 'success', content: 'This is success event.'},
//         {type: 'error', content: 'This is error event.'},
//         {type: 'warning', content: 'This is warning event.'},
//         {type: 'success', content: 'This is success event.'},
//         {type: 'error', content: 'This is error event.'},
//       ];
//       break;
//     default:
//   }
//   return listData || [];
// };
// const options = [{
//   value:'浙江',
//   label:'浙江',
//   children: [
//     {
//       value:'杭州',
//       label:'杭州',
//       children: [
//         {
//           value:'西湖',
//           label:'西湖',
//           code: 752100,
//         },
//       ],
//   },],
// },
// {
// value:'江苏',
// label:'江苏',
// children:[
//   {
//     value:'南京',
//     label:'南京',
//     children:[
//       {
//         value:'中华门',
//         label:'中华门',
//         code:453400,
//       },
//     ],
//   },
// ],
// },
// ];
// function handleAreaClick(e,label,option){
//   e.stopPropagation();
//   console.log('clicked',label.option);
// }
// const displayRender = (labels, selectedOptions) =>
//   labels.map((label, i) => {
//     const option = selectedOptions[i];
//     if (i === labels.length - 1) {
//       return (
//         <span key={option.value}>
//           {label} (<a onClick={e => handleAreaClick(e, label, option)}>{option.code}</a>)
//         </span>
//       );
//     }
//     return <span key={option.value}>{label} / </span>;
//   });
// function dateCellRender(value){
//   const listData = getListData(value);
//   return(
//     <ul className="events">
//       {listData&&listData.map(item=>(
//         <li key={item.content}>
//           <Badge status={item.type} text={item.content}></Badge>
//         </li>
//       ))}
//     </ul>
//   );
// };
// function getMonthData(value){
//   if(value.momth() === 9){
//     return 1394;
//   }
// };
// function monthCellRender(value){
//   const num = getMonthData(value);
//   return num ? (
//     <div className="notes-month">
//       <section>{num}</section>
//       <span>Backlog number</span>
//     </div>
//   ) : null;
// }
// function onChangeBox(e){
//   console.log(`checked = ${e.target.checked}`);
// }
// function App() {
//   return (
   
//     <div className="App">
//       <header className="App-header">
//         {/* 走马灯 */}
//         <Carousel autoplay style={backgroundStyle}>
//           <div>
//             <h3 style={contentStyle}>1</h3>
//           </div>
//           <div>
//             <h3 style={contentStyle}>2</h3>
//           </div>
//           <div>
//             <h3 style={contentStyle}>3</h3>
//           </div>
//         </Carousel>
//         {/* 简单日历 */}
//         <Calendar onPanelChange={onPanelChange} style={calenderStyle}>
//         </Calendar>
//         {/* 加有tips的日历 */}
//         <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender}>
//         </Calendar>
//         {/* 级联选择 */}
//         <Cascader 
//         style={marginTopStyle}
//         options={options}
//         defaultValue={['浙江','杭州','西湖']}
//         displayRender={displayRender}
//         >
//         </Cascader>
//         {/* 简单选择框 */}
//         <Checkbox onChange={onChangeBox}>checkbox</Checkbox>
//         {/* checkbox组 */}
//         <Checkbox.Group style={{width:'100%'}}>
//           <Row>
//             <Col span={8}>
//               <Checkbox value="A">A</Checkbox>
//             </Col>
//             <Col span={8}>
//               <Checkbox value="B">B</Checkbox>
//             </Col>
//             <Col span={8}>
//               <Checkbox value="C">C</Checkbox>
//             </Col>
//             <Col span={8}>
//               <Checkbox value="D">D</Checkbox>
//             </Col>
//             <Col span={8}>
//               <Checkbox value="E">E</Checkbox>
//             </Col>
//           </Row>
//         </Checkbox.Group>
//         <Rate allowHalf defaultValue={2.5} />
//         <Button type="primary">Button Anted</Button>
//       </header>
//     </div>
//   );
// }

// export default App;

// Hook使用规则
// Hook就是JS函数，使用它的规则：
// 1、只能在函数最外层调用，不要在循环、条件判断或者子函数中调用。2、只能在React的函数组件或自定义Hook中调用Hook。
import React, {useState, useEffect } from 'react';
function App() {
  // State Hook
  const [count, setCount] = useState(0);      //初始state只有在第一次渲染的时候会使用到
  const [count1, setCount1] = useState(initialCount);
  // Effect Hook:给函数组件增加了操作副作用（在react组件中执行数据获取、订阅或者手动修改过DOM的操作）的能力。
  // 相当于componentDidMount 和 componentDidUpDate:
  // 当调用useEffect时，就是在告诉React在完成对DOM的更改后运行你的‘副作用’函数。
  useEffect(()=>{
    // 使用浏览器的API更新页面标题
    document.title = `You clicked ${count} times`;
  });
  // 自定义Hook:将friendID作为参数，并返回好友是否在线。
  function useFriendStatus(friendID) {
    const [isOnline, setIsOnline] = useState(null);
    function handleStatusChange(status){
      setIsOnline(status.isOnline);
    }
    useEffect(() =>{
      ChatAPI.subscribeToFriendStatus(friendID,handleStatusChange);
      return ()=>{
        ChatAPI.unsubscribeFromFriendStatus(friendID,handleStatusChange);
      };
    });
    return isOnline;
  }
  // 在另外两个组件中使用自定义的Hook
  function FriendStatus(props){
    const isOnline = useFriendStatus(props.friend.id);
    if(isOnline === null){
      return 'Loading....';
    }
    return isOnline ? 'online':'offline';
  }
  function FriendListItem(props) {
    const isOnline = useFriendStatus(props.friend.id);
    return (
      <li style={{color:isOnline ? 'green' : 'black'}}>
        {props.friend.name}
      </li>
    );
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        click me
      </button>
      Count:{count1}
    </div>
  );
}
export default App;